<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      auto-complete="on"
      class="login-form"
      label-position="left"
    >
      <div class="title-container">
        <!-- <el-button type="primary" size="default" @click="record">开始录音</el-button> -->

        <h3 class="title">摩卡运营后台管理系统</h3>
      </div>

      <el-form-item prop="admin_name">
        <el-input
          v-model="loginForm.admin_name"
          auto-complete="off"
          autofocus
          name="username"
          placeholder="请输入账号"
          size="mini"
          style="width: 235px;"
          type="text"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          :type="passwordType"
          auto-complete="off"
          name="password"
          placeholder="请输入密码"
          size="mini"
          style="width: 235px;"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye"/>
        </span>
      </el-form-item>

      <div class="btnStm" @click="handleLogin">登录</div>

    </el-form>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import md5 from 'js-md5'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback()
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        admin_name: '',
        password: undefined
      },
      loginRules: {
        // username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [
          { required: true, trigger: 'blur', message: '请输入密码' }
        ]
      },
      passwordType: 'password',
      loading: false,
      redirect: undefined
    }
  },

  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    record() {
      navigator.mediaDevices.getUserMedia(
        { audio: true }
      ).then().catch(this.getMediaError)
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    // 登录
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (!valid) return

        let newLoginForm = {
          admin_name: this.loginForm.admin_name,
          password: md5(this.loginForm.password)
        }
        this.$store
          .dispatch('LoginByUsername', newLoginForm)
          .then(res => {
            this.$router.push({
              path: this.redirect || '/dashboard/dashboard'
            })
          })
      })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg         : #283443;
$light_gray : #eee;
$cursor     : #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color : $cursor;

    &::first-line {
      color : $light_gray;
    }
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display : inline-block;
    height  : 32px;
    width   : 100%;

    input {
      background         : transparent;
      border             : 0;
      -webkit-appearance : none;
      border-radius      : 0;
      padding            : 12px 5px 12px 15px;
      color              : $light_gray;
      height             : 32px;
      caret-color        : $cursor;

      &:-webkit-autofill {
        -webkit-box-shadow      : 0 0 0 1000px $bg inset !important;
        -webkit-text-fill-color : $cursor !important;
      }
    }

    .el-input__inner {
      transform : translateY(-10px);
    }

    .el-form-item--medium .el-form-item__content {
      height : 32px;
      width  : 220px;
    }

    .el-form-item {
      /*background: red;*/
      height        : 32px;
      margin-left   : 180px;
      margin-bottom : 10px;
      margin-top    : 20px;
    }
  }

  .el-form-item--medium .el-form-item__content {
    height : 32px;
    width  : 220px;
  }

  .el-form-item {
    height      : 32px;
    margin-left : 180px;
  }
}
</style>

<style lang="scss" scoped>
$bg         : #2d3a4b;
$dark_gray  : #889aa4;
$light_gray : #eee;

.login-container {
  min-width       : 800px;
  min-height      : 800px;
  width           : 100%;
  height          : 100%;
  background      : url("~@/assets/dashboard/bg@2x.png") no-repeat center;
  background-size : cover;
  overflow        : hidden;

  .login-form {
    position        : relative;
    width           : 410px;
    height          : 230px;
    max-width       : 100%;
    /*padding: 250px 35px 0 35px;*/
    margin          : 250px auto 0;
    overflow        : hidden;
    background      : url("~@/assets/dashboard/frame@2x.png") no-repeat center;
    background-size : contain;
  }

  .tips {
    font-size     : 14px;
    color         : #fff;
    margin-bottom : 10px;

    span {
      &:first-of-type {
        margin-right : 16px;
      }
    }
  }

  .svg-container {
    padding        : 6px 5px 6px 15px;
    color          : $dark_gray;
    vertical-align : middle;
    width          : 30px;
    display        : inline-block;
  }

  .title-container {
    position : relative;

    .title {
      font-size   : 26px;
      color       : $light_gray;
      margin      : 20px auto 20px auto;
      text-align  : center;
      font-weight : bold;
    }

    .set-language {
      color    : #fff;
      position : absolute;
      top      : 5px;
      right    : 0px;
    }
  }

  .show-pwd {
    position    : absolute;
    right       : 26px;
    top         : 2px;
    font-size   : 16px;
    color       : $dark_gray;
    cursor      : pointer;
    user-select : none;
  }

  .thirdparty-button {
    position : absolute;
    right    : 0;
    bottom   : 6px;
  }
}

.btnStm {
  color       : white;
  transform   : translate(149px, -.75em);
  width       : 243px;
  height      : 32px;
  line-height : 32px;
  text-align  : center;
  cursor      : pointer;
}
</style>
